<template>
    <div>
        <maskView>
            <h4>选择人员</h4>
            <div>{{selected.length}}&nbsp;/&nbsp;{{nameList.length}}</div>
            <div class="container-content selection-disable">
                <div class="list-group">
                    <a
                        class="list-group-item list-group-item-action item-my"
                        :class="{'list-group-item-secondary font-weight-bold':selected.indexOf(name)>-1}"
                        v-for="(name,id) in nameList" :key="id"
                        @click="$emit('select',name)"
                    >{{name}}</a>
                </div>
            </div>
            <div class="text-center">
                <button type="button" class="btn btn-dark btn-lg" @click="$emit('close')">关闭</button>
            </div>
        </maskView>
    </div>
</template>

<script>
import maskView from "@/views/maskView";
export default {
    name: "nameSelector",
    props:["selected"],
    components: {
        maskView
    },
    computed: {
        nameList() {
            return this.$store.state.nameList;
        }
    }
};
</script>

<style scoped>
.container-content {
    position: relative;
    height: 40vh;
    width: 100%;
    display: inline-block;
    overflow-y: auto;
    border: 1px solid #eee;
}
button {
    margin: 1em;
}
.item-my {
    border-radius: 0;
    padding:0.5em;
    text-align: center;
}
</style>